<template>
  <div>
      <a-row style="line-height: 30px;margin-bottom: 10px"
             v-for="(param,paramIndex) in skuShowList">
          <a-col :span="4">
              <span class="price-left">{{param.unit && param.unit!==''?(param.name+'('+param.unit+')'):param.name}}</span>
          </a-col>
          <a-col :span="17">
                <span :class="selectedParam[param.id]===pvalueIndex?'spec-div-active':'spec-div'"
                      v-for="(pval,pvalueIndex) in param.values"
                      @click="chooseSku(param.id,pvalueIndex,paramIndex,param.groupId)">
                    <span>
                        {{pval}}
                    </span>
                </span>
          </a-col>
      </a-row>
  </div>
</template>

<script>

    function fillSelected(targetSku, newParam, groupId, skuId) {
        if (targetSku.pictures) {
            targetSku.pictureList = JSON.parse(targetSku.pictures)
        }

        // this.selectedSku = targetSku;
        this.$emit("changeSelectedSku", targetSku)

        this.$emit("changeSelectedParam", newParam)
        // this.selectedParam = newParam;

        if (groupId) {
            //修改规格展示信息
            let targetGroup = this.specList.find(spec => spec.groupId === groupId);
            if (targetGroup) {
                let targetSpec = targetGroup.values.find(v => v.id === skuId);
                if (targetSpec) {
                    targetSpec.value = JSON.parse(targetSku.spec)[skuId]

                    if (targetSpec.unit && targetSpec.unit !== '') {
                        targetSpec.value += targetSpec.unit
                    }
                }
            }
        }
    }

    export default {
        name: "specDetail",
        props: {
            skuShowList: Array,
            specList: Array,
            selectedParam: Object,
            goodsSkus: Array,
            selectedSku: Object,

        },
        data() {
            return {}
        },
        methods: {
            /**
             * 选中规格项
             * 修改规格选中的索引位置
             * 修改当前选中的sku
             * 修改规格展示信息
             * @param skuId
             * @param valueIndex 规格项的第几个值
             * @param paramIndex 第几个规格
             */
            chooseSku(skuId, valueIndex, pramIndex, groupId) {
                console.log(skuId)
                let newParam = {}
                Object.assign(newParam, this.selectedParam)
                newParam[skuId] = valueIndex;
                let paramValue = Object.values(newParam);
                let indexes = ""
                paramValue.forEach(item => indexes += item + "_")
                indexes = indexes.substring(0, indexes.length - 1);

                let skus = []
                Object.assign(skus, this.goodsSkus)
                //根据当前选中的规格索引查找目标sku对象
                let targetSku = skus.find(sku => sku.specIndexes === indexes);
                if (targetSku) {
                    fillSelected.call(this, targetSku, newParam, groupId, skuId);
                } else {
                    //否则 根据当前选中的规格项 找出其可搭配的规格

                    //当前规格项的位置 *2是因为 specIndex的下划线 _
                    let fromIndex = 2 * pramIndex;
                    console.log(fromIndex)
                    let targetSku = skus.find(sku => sku.specIndexes.substr(fromIndex, 1) === indexes.substr(fromIndex, 1));
                    console.log(targetSku)
                    if (targetSku) {
                        let targetSpec = JSON.parse(targetSku.spec);
                        let targetSpecKeys = Object.keys(targetSpec)
                        //重新组装selectedParam
                        newParam = {}
                        for (let i = 0; i < targetSpecKeys.length; i++) {
                            fromIndex = 2 * i;
                            newParam[targetSpecKeys[i]] = parseInt(targetSku.specIndexes.substr(fromIndex, 1))
                        }

                        fillSelected.call(this, targetSku, newParam, groupId, skuId);
                    }
                }
            },
        }
    }
</script>

<style scoped>
    .price-left {
        color: #999999;
        vertical-align: center;
        padding-left: 10px;
        font-family: SimSun;
        line-height: 22px;
        font-size: 13px
    }

    .spec-div-active {
        border: 1px solid #de3033;
        width: auto;
        font-size: 12px;
        color: white;
        background: #f82428;
        margin-right: 10px;
        line-height: 32px;
        padding: 5px
    }

    /*    规格*/
    .spec-div {
        border: 1px solid #CCCCCC;
        width: auto;
        font-size: 12px;
        color: #6C6C6C;
        background: white;
        margin-right: 10px;
        line-height: 32px;
        padding: 5px;
        cursor: pointer;
    }

</style>